<template>
	<view class="container good-point-detail">
		<view class="tui-banner-swiper">
			<!-- #ifdef MP-WEIXIN || H5 -->
			<swiper :indicator-dots="true" indicator-color="#fff" indicator-active-color="#E96D71" :autoplay="false "
				:interval="5000" :duration="150" :circular="true" @change="bannerChange" class="product-detail-swiper"
				:style="{height:scrollH+'px'}">
				<block v-for="(item,index) in banner" :key="index">
					<swiper-item :data-index="index">
						<image v-if="index>=videoLength" lazy-load :src="imgSrc+item" class="tui-slide-image"
							:style="{height:scrollH+'px'}" />
						<video v-else :poster="imgSrc+banner[0]" class="tui-slide-image" :id="'myVideo'+index"
							:src="imgSrc+videoUrl" @error="videoErrorCallback" :autoplay='false'
							:enable-progress-gesture = "false"
							:show-fullscreen-btn="true" show-center-play-btn controls
							:style="{height:scrollH+'px'}"></video>
					</swiper-item>
				</block>
			</swiper>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="product-detail-swiper"></view>
			<!-- #endif -->
		</view>
		<!-- 商品详细信息 -->
		<view class="tui-pro-detail">
			<view class="tui-product-title">
				<view class="" style="width: 100%;">
					<view class="pro-price-wrapper">
						<view class="pricebox">
							<view class="tui-pro-pricebox tui-padding">
								<view class="tui-pro-price">
									<view v-if="from == 'agent'">
										<template v-if="goodData.goodsPoints||goodData.goodsPoints==0">{{goodData.goodsPoints||0}}<text>积分</text></template>
									</view>
									<view v-else>
										<template v-if="goodData.couponPoints||goodData.couponPoints==0">
											{{goodData.couponPoints||0}}<text>积分</text>
										</template>
									</view>
								</view>
							</view>
						</view>
						<view class="exchange">累计销量 {{goodData.exchangedNum || 0}}</view>
					</view>
					<!-- 商品名称 -->
					<view class="tui-pro-titbox">
						<view v-if="from == 'agent'" class="tui-pro-title">{{goodData.goodsName}}</view>
						<view v-else class="tui-pro-title">{{goodData.couponName}}</view>
					</view>
					<!-- 商品描述 -->
					<view class="tui-pro-titbox" v-if="from == 'agent'">
						<view class="tui-pro-desc">{{goodData.goodsDesc}}</view>
					</view>
					<view class="tui-pro-titbox" v-else>
						<view class="tui-pro-desc">{{goodData.couponSummary}}</view>
					</view>
				</view>
			</view>
			<view class="tui-coupon-info">
				<view class="tui-list-cell skuChoice">
					<view class="couponicon">商品规格</view>
				</view>
				<template v-if="from == 'agent'">
					<view class="sku-content">
						<view class="category-text" v-if="systemSet.dealerGuidancePriceFlg">
							<text class="title">市场指导价</text>
							<text class="name">{{goodData.guidancePrice||0}}</text>
						</view>
						<view class="category-text" v-if="systemSet.productStockFlg">
							<text class="title">商品库存</text>
							<text class="name">{{goodData.goodsStock||0}}</text>
						</view>
						<view class="category-text" v-if="systemSet.dealerSpecModelFlg">
							<text class="title">规格型号</text>
							<text class="name">{{goodData.goodsSpecModel}}</text>
						</view>
						<view class="category-text" v-if="systemSet.dealerProductCodeFlg">
							<text class="title">商品编码</text>
							<text class="name">{{goodData.goodsCode}}</text>
						</view>
						<view class="category-text" v-if="systemSet.dealerProductCategoryFlg">
							<text class="title">商品分类</text>
							<text class="name">{{goodsBrand}}</text>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="sku-content">
						<view class="category-text" v-if="systemSet.guidancePriceFlg">
							<text class="title">市场指导价</text>
							<text class="name"></text>
						</view>
						<view class="category-text" v-if="systemSet.productStockFlg">
							<text class="title">商品库存</text>
							<text class="name">{{goodData.couponRemainCount||0}}</text>
						</view>
						<view class="category-text" v-if="systemSet.specModelFlg">
							<text class="title">规格型号</text>
							<text class="name"></text>
						</view>
						<view class="category-text" v-if="systemSet.productCodeFlg">
							<text class="title">商品编码</text>
							<text class="name">{{goodData.couponId}}</text>
						</view>
						<view class="category-text" v-if="systemSet.productCategoryFlg">
							<text class="title">商品分类</text>
							<text class="name">{{categoryName}}</text>
						</view>
					</view>
				</template>
				
			</view>
			<!-- 商品详情 -->
			<view class="tui-coupon-info">
				<view class="tui-list-cell skuChoice">
					<view class="couponicon ">商品详情</view>
				</view>
				<view class="evaluateContent">
					<view class="tui-product-img">
						<view class="detailsBox" v-for="(item,index) in goodsDetailImg" :key="index">
							<image class="detailsImg" :src="imgSrc+item" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
			<!-- <tui-nomore text="已经到最底了" :visible="true" bgcolor="#f2f2f2"></tui-nomore> -->
			<view class="tui-safearea-bottom"></view>
		</view>
		<!--底部操作栏-->
		<view class="tui-operation">
			<view class="tui-operation-left tui-col-5" >
				<view v-if="from == 'agent'" class="tui-operation-item"
				hover-class="opcity" :hover-stay-time="150" @tap="navTo('/packageD/pages/pointsCart/pointsCart')">
					<view class="iconfont icongouwuche cart"></view>
					<view class="tui-operation-text tui-scale-small">购物车</view>
					<view class="tui-badge tui-badge-red" v-if="carCount!==0">{{carCount}}</view>
				</view>
			</view>
			<view v-if="from == 'agent'" class="tui-operation-right tui-right-flex tui-col-7 tui-btnbox-4"
			:class="[goodData.goodsStock == 0||goodData.goodsIsShelf == 0?'gray-style':'']" >
				<!--下架-->
				<template v-if="goodData.goodsIsShelf == 0">
					<view class="tui-flex-1">
						<button class="tui-btn-warning">已下架</button>
					</view>
				</template>
				<template v-else>
					<view class="tui-flex-1">
						<button v-if="goodData.goodsStock == 0" class="tui-btn-warning">加入购物车</button>
						<button v-else class="tui-btn-warning" @tap="showPopup('cart')">加入购物车</button>
					</view>
					<view class="tui-flex-1">
						<button v-if="goodData.goodsStock == 0" class="tui-btn-danger">立即兑换</button>
						<button v-else class="tui-btn-danger" @tap="showPopup('buy')">立即兑换</button>
					</view>
				</template>
			</view>
			<view v-else class="tui-operation-right tui-right-flex tui-col-7 tui-btnbox-4" :class="[goodData.couponRemainCount == 0||couponShelf!='1'?'gray-style':'']" >
				<view class="tui-flex-1" v-if="couponShelf=='1'">
					<button v-if="goodData.couponRemainCount == 0" class="tui-btn-danger">立即兑换</button>
					<button v-else class="tui-btn-danger" :disabled="disabledBuy" :class="[disabledBuy?'diabled-buy-btn':'']" @tap="showPopup('buy')">立即兑换</button>
				</view>
				<view class="tui-flex-1" v-else>
					<button class="tui-btn-danger" v-if="couponShelf=='2'">未上架</button>
					<button class="tui-btn-danger" v-if="couponShelf=='3'">已下架</button>
				</view>
			</view>
		</view>
		<!--选择商品数量-->
		<uni-popup ref="popup" type="bottom" :show="popupShow">
			<view class="content column">
				<view class="iconfont iconguanbi skuIconfont" @click="closePop"></view>
				<view class="pro-info row">
					<image class="pic" v-if="popImg" :src="imgSrc + popImg" mode="aspectFill"></image>
					<view class="right column">
						<text class="price" v-if="from == 'agent'">{{ goodData.goodsPoints || 0 }}<text>积分</text></text>
						<text class="price" v-else>{{ goodData.couponPoints || 0 }}<text>积分</text></text>
					</view>
					<view class="limit-buy" v-if="from=='agent'&& goodData.goodsNumber">限购{{goodData.goodsNumber}}件</view>
				</view>
				
				<view class="number-wrap row">
					<text class="s-tit fill">数量</text>
					<tui-numberbox v-if="from=='agent'" :value="buyNumber" :min="1" :max="goodData.goodsNumber || 999" @change="onNumberChange"></tui-numberbox>
					<tui-numberbox v-else :value="buyNumber" :min="1" :max="goodData.couponRemainCount || 999" @change="onNumberChange"></tui-numberbox>
				</view>
				<view class="btn-wrap row">
					<view @click="confirmBuy"
					:class="confirmBuyFlag?'disabled-btn center':'confirm-btn center'">
						<text>确认</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<loading></loading>
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import tuiNomore from "@/components/nomore/nomore"
	import mixin from "@/utils/mixin.js"
	import tuiBottomPopup from "@/components/bottom-popup/bottom-popup"
	import tuiNumberbox from '@/components/numberbox/numberbox';

	export default {
		mixins: [mixin],
		components: {
			tuiNomore,
			tuiBottomPopup,
			tuiNumberbox
		},
		data() {
			return {
				couponShelf:'',//1上架期间 2未上架 3已下架
				clickType: '',//购物车或立即购买标识
				catagoryList: [],
				from: '',
				id: '',
				imgSrc: this.$store.state.imgUrl,
				banner: [],
				goodData: {},
				goodsDetailImg: [],
				videoUrl: '',
				videoLength: 0,
				scrollH: 0,
				carCount:0,
				popImg: '',
				buyNumber:1,
				popupShow:false,
				currentTime:new Date(),
				systemSet: {},//规格栏开关内容
				dealerId:uni.getStorageSync('agencyId'),
				categoryName:'',
				disabledBuy:false,//非经销商积分商城兑换购买禁用
				goodsBrand:'',//品牌名
				confirmBuyFlag:false,//加购请求是否正在执行
			}
		},
		mounted() {
			this.getCatagoryName();
			this.queryPointSystemSet();
			this.$nextTick(function(){
				if (this.from == 'agent') {
					this.queryGoodsDetail(this.id);
					// this.getAgentPointCartNum();
				} else {
					this.getCouponDetail(this.id);
				}
			})
			
			// #ifdef APP-PLUS
			const subNvue = uni.getSubNVueById('swiperPoint'); //初始化subnvue对象 'swiper'为pages.josn中注册时的唯一标识
			subNvue.show(); //显示subnvue;
			// #endif
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.scrollH = res.windowWidth / 2
					}
				})
			}, 50);
		},
		onShow(){
			if (this.from == 'agent') {
				this.getAgentPointCartNum();
			}
		},
		onLoad(options) {
			console.log(options)
			this.id = options.id;
			this.from = options.from;
			// #ifdef H5
			this.$wechat.noShare();
			// #endif
		},
		watch:{
			popupShow(newValue) {
				// #ifdef APP-PLUS
				uni.$emit('skuShow', {
					skuShow: newValue,
				})
				// #endif
			},
		},
		methods: {
			getGoodsBrand(brand){
				let goodsBrandArr=this.$store.state.dictDataAll.goodsBrand;
				let goodsBrandText = goodsBrandArr.filter((item) => {
					return item.dictValue==brand
				})[0];
				this.goodsBrand=goodsBrandText.dictLabel;
			},
			getCategoryName(id){
				let categoryArr=this.$store.state.dictDataAll.couponType;
				let categoryText = categoryArr.filter((item) => {
					return item.dictValue==id
				})[0];
				this.categoryName=categoryText.dictLabel;
			},
			
			//判断优惠券是否在上架期间
			isDuringDate() {
				const curDate = this.currentTime.getTime(),
					beginDate = new Date(this.goodData.shelfDate.replace(/-/g, '/')).getTime(),
					endDate = new Date(this.goodData.shelfDateEnd.replace(/-/g, '/')).getTime();
				if (curDate >= beginDate && curDate <= endDate) {
					// 上架期间
					this.couponShelf = '1';
				}
				if(curDate < beginDate) {
					// 未上架
					this.couponShelf = '2';
				}
				if(curDate > endDate) {
					// 已下架
					this.couponShelf = '3';
				}
			},
			//获取规格栏开关内容
			queryPointSystemSet() {
				this.$http.getPointSystemSet().then((res) => {
					if(res.status == 0) {
						this.systemSet = res.data;
					}
				})
			},
			//获取经销商商品详情
			queryGoodsDetail(id) {
				this.banner = [];
				const params = {
					id,
					dealerId:this.dealerId,//根据dealerId查询限购数
				}
				this.$http.getPointGoodsDetail(id,params).then((res) => {
					if (res.status === 0) {
						console.log(res.data);
						this.goodData = res.data;
						this.getGoodsBrand(this.goodData.goodsBrand);//获取品牌名
						
						for(let i = 0; i < this.catagoryList.length;i++) {
							if(this.catagoryList[i].id == res.data.categoryId) {
								this.categoryName = this.catagoryList[i].categoryName;
								break
							}
						}
						
						console.log(this.goodData)
						res.data.nlmGoodsImgsData.forEach(item => {
							if (item.imgIndex == -2) {
								this.goodsDetailImg.push(item.imgRelativeUri);
							} else if(item.imgIndex == -4) {
								this.videoUrl = item.imgRelativeUri;
								this.videoLength = 1;
							}
						})
						res.data.nlmGoodsCarouselImageData.forEach((item) => {
							this.banner.push(item.goodsCarouselImageUrl);
						})
						console.log(this.banner)
						
						// #ifdef APP-PLUS
						uni.$emit('bannerPoint', {
							banner: this.banner,
							videoLength: this.videoLength,
							url: this.videoUrl,
							scrollH: this.scrollH
						})
						// #endif
					}
				})
			},
			//获取优惠券详情
			getCouponDetail(id) {
				this.banner = [];
				this.$http.getTNlmCouponDetail(id).then((res) => {
					if (res.status === 0) {
						console.log(res.data);
						this.goodData = res.data.nlmCouponData;
						this.goodData.nlmCouponImageData = res.data.nlmCouponImageData;
						// const conditionArr = this.catagoryList.filter(i => i.id == res.data.nlmCouponData.categoryId)
						// if(conditionArr.length > 0) {
						// 	this.categoryName = conditionArr[0].categoryName;
						// } else {
						// 	this.categoryName = '';
						// }
						this.isDuringDate();
						// for(let i = 0; i < this.catagoryList.length;i++) {
						// 	if(this.catagoryList[i].id == res.data.nlmCouponData.categoryId) {
						// 		this.categoryName = this.catagoryList[i].categoryName;
						// 		break
						// 	}
						// }
						this.getCategoryName(res.data.nlmCouponData.couponType);//获取商品分类
						
						if(this.goodData.couponCount >= this.goodData.couponRemainCount) {
							this.goodData.exchangedNum = this.goodData.couponCount - this.goodData.couponRemainCount;
						} else {
							this.goodData.exchangedNum = this.goodData.couponCount;
						}
						
						console.log(this.goodData)
						res.data.nlmCouponImageData.forEach(item => {
							if (item.imgIndex == -2) {
								this.goodsDetailImg.push(item.imgRelativeUri);
							}
						})
						res.data.nlmCouponCarouselImageData.forEach((item) => {
							this.banner.push(item.couponCarouselImageUrl);
						})
						if(res.data.nlmCouponCarouselVideoData.length > 0) {
							this.videoLength = res.data.nlmCouponCarouselVideoData.length;
							this.videoUrl = res.data.nlmCouponCarouselVideoData[0].couponCarouselVideoUrl;
						} else {
							this.videoLength = 0
						}
						// #ifdef APP-PLUS
						uni.$emit('bannerPoint', {
							banner: this.banner,
							videoLength: this.videoLength,
							url: this.videoUrl,
							scrollH: this.scrollH
						})
						// #endif
					}
				})
			},
			//获得分类列表
			getCatagoryName() {
				const params = {
					type: this.from == 'agent' ? 0 : 1, //0经销商 1非经销商
					current: 1,
					pageSize: 10000
				}
				this.$http.getTNlmGoodsCategory(params).then((res) => {
					if (res.status === 0) {
						if (res.data.records.length > 0) {
							this.catagoryList = res.data.records;
						}
					}
				})
			},
			//获取经销商购物车件数
			getAgentPointCartNum(){
				this.$http.getPointCartNum().then((res) => {
					if(res.status == 0) {
						this.carCount = res.data;
					}
				})
			},
			//修改数量
			onNumberChange(e) {
				this.buyNumber = e.value;
			},
			showPopup(type) {
				if(this.from == 'agent') {
					this.popImg = this.goodData.nlmGoodsImgsData.filter(i => i.imgIndex == -1)[0].imgRelativeUri;
				} else {
					this.popImg = this.goodData.nlmCouponImageData.filter(i => i.imgIndex == -1)[0].imgRelativeUri;
				}
				this.clickType = type;
				this.popupShow = !this.popupShow;
				this.buyNumber = 1;
			},
			closePop() {
				this.popupShow = !this.popupShow;
			},
			confirmBuy(){
				if(this.from == 'agent') {
					if(this.clickType == 'cart') {
						this.updatePointCart();
					} else {
						let goodsInfo = [{
							goodsId: this.id,
							goodsQty:this.buyNumber
						}]
						
						uni.navigateTo({
							url:`/packageD/pages/pointsOrder/settleOrderDetail?from=${this.from}&goodsInfo=${JSON.stringify(goodsInfo)}`
						})
						this.closePop();
					}
				} else {
					if(this.clickType == 'buy') {
						let params={
								couponId:this.id,
								couponQty:this.buyNumber,
							}
							
							this.$http.notDealerOrderConfirm(params).then((res) => {
								if (res.status === 0) {
									uni.navigateTo({
										url:`/packageD/pages/pointsOrder/settleOrderDetail?from=${this.from}&couponId=${this.id}&couponQty=${this.buyNumber}`
									})
									this.disabledBuy = false;
								} else {
									this.disabledBuy = true;
								}
							})
						this.closePop();
						
					}
				}
			},
			//经销商加入购物车
			updatePointCart() {
				if(!this.confirmBuyFlag){
					this.confirmBuyFlag=true;//正在请求接口
					let data = {
						addInfo:[{
							goodsId: this.id,
							goodsQty:this.buyNumber
						}]
					}
					this.$http.editPointCart(data).then((res) => {
						this.confirmBuyFlag=false;
						if(res.status == 0) {
							uni.showToast({
								icon:'success',
								title:'添加成功'
							})
							this.$eventHub.$emit('refreshPointsCart');
							//更新购物车件数
							this.getAgentPointCartNum();
							this.closePop();
							
						}
					})
				}
				
			},
			bannerChange(e) {
				this.bannerIndex = e.detail.current
			},
		},

	}
</script>

<style lang="scss">
	.good-point-detail {
		background-color: #f2f2f2;
		.product-detail-swiper {
			height: 352rpx !important;
		}
		
		.tui-slide-image {
			width: 100%;
			height: 352rpx !important;
			display: block;
		}
		
		.tui-banner-swiper {
			position: relative;
		}
		
		// .tui-banner-swiper .tui-tag-class {
		// 	position: absolute;
		// 	color: #fff;
		// 	bottom: 30rpx;
		// 	right: 0;
		// }
		
		// .tui-banner-swiper .wx-swiper-dot {
		// 	width: 8rpx;
		// 	height: 8rpx;
		// 	display: inline-flex;
		// 	background: none;
		// 	justify-content: space-between;
		// }
		
		// .tui-banner-swiper .wx-swiper-dot::before {
		// 	content: '';
		// 	flex-grow: 1;
		// 	background: rgba(255, 255, 255, 0.8);
		// 	border-radius: 16rpx;
		// 	overflow: hidden;
		// }
		
		// .tui-banner-swiper .wx-swiper-dot-active::before {
		// 	background: #fff;
		// }
		
		// .tui-banner-swiper .wx-swiper-dot.wx-swiper-dot-active {
		// 	width: 16rpx;
		// }
		
		/*内容 部分*/
		.tui-padding {
			padding: 0 30rpx;
			box-sizing: border-box;
		}
		
		.tui-gray {
			color: #999;
		}
		
		.tui-icon-red {
			color: $red;
		}
		
		.tui-pro-detail {
			box-sizing: border-box;
			color: #333;
		
			.tui-pro-titbox {
				@include multiline-text-overflow;
				font-size: 32rpx;
				font-weight: 500;
				position: relative;
				padding: 0 30rpx;
				margin-top: 16rpx;
				box-sizing: border-box;
				
				.tui-pro-title {
					font-size: 32rpx;
					font-weight: bold;
				}
		
				.tui-pro-desc {
					font-size: 24rpx;
					color: #999999;
					margin-left: 5rpx;
				}
			}
		
			.tui-product-title {
				color: #121212;
				background: #fff;
				padding-bottom: 20rpx;
				position: relative;
				display: flex;
				justify-content: space-between;
			}
		
			.pro-price-wrapper {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;
		
				.exchange {
					padding-right: 30rpx;
					font-size: 24rpx;
					color: #757575;
				}
		
				.pricebox {
					display: flex;
					align-items: center;
				}
		
				.tui-pro-pricebox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: $red;
					font-size: 40rpx;
					line-height: 44rpx;
		
		
				}
		
				.tui-pro-price {
					font-size: 48rpx;
					display: flex;
					align-items: center;
					font-weight: 600;
		
					text {
						font-size: 28rpx;
						margin-left: 8rpx;
					}
				}
		
				.tui-original-price {
					font-size: 28rpx;
				}
		
				.tui-line-through {
					text-decoration: line-through;
				}
		
			}
		
		
			.tui-product-img {
				border-top: 2rpx solid transparent;
				background-color: #fff;
				padding: 0 30rpx;
		
				.detailsImg {
					width: 100%;
					display: block;
				}
			}
		}
		
		.tui-coupon-info {
			background: #fff;
			// border-radius: 24rpx;
			margin-top: 20rpx;
			overflow: hidden;
		
			.tui-list-cell {
				width: 100%;
				position: relative;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				line-height: 26rpx;
				padding: 32rpx;
				box-sizing: border-box;
		
				.skuChoice {
					border-bottom: #ccc;
				}
		
				.tui-ml-auto {
					margin-left: auto;
				}
		
				.couponicon {
					font-size: 32rpx;
					color: #121212;
					font-weight: bold;
				}
			}
		
			.sku-content {
				padding: 0 32rpx;
				font-size: 28rpx;
		
				.category-text {
					display: flex;
					justify-content: space-between;
					margin-bottom: 32rpx;
		
					.title {
						width: 150rpx;
						color: #999999;
					}
		
					.name {
						flex: 1;
						text-align: right;
						color: #111111;
					}
				}
			}
		}
		
		.tui-operation {
			width: 100%;
			height: calc(100rpx +env(safe-area-inset-bottom));
			// height: 196rpx;
			background: #fff;
			position: fixed;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			z-index:9999;
			bottom: 0;
			left: 0;
			right: 0;
			// padding-top: 34rpx;
			padding-bottom: env(safe-area-inset-bottom);
		
			&:before {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				left: 0;
				border-top: 1rpx solid #eaeef1;
				-webkit-transform: scaleY(0.5);
				transform: scaleY(0.5);
			}
		
			.tui-btn-danger {
				color: #fff;
				font-size: 28rpx;
				width: 200rpx;
				height: 70rpx;
				background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
				border-radius: 40rpx;
			}
			
			.diabled-buy-btn {
				background: #F5F5F5 !important;
				color: #CCCCCC !important;
			}
		
			.tui-btn-warning {
				color: #fff;
				font-size: 28rpx;
				width: 200rpx;
				height: 70rpx;
				border-radius: 40rpx ;
				margin-right: 16rpx;
				background: linear-gradient(149deg, #FFAB39 0%, #FF6307 100%);
			}
		}
		.tui-operation-left {
			display: flex;
			align-items: center;
			padding-left: 32rpx;
			// height: 100rpx;
			.tui-operation-item {
				position: relative;
			}
			.tui-operation-text {
				font-size: 22rpx;
			}
			.cart {
				font-size: 40rpx !important;
			}
			.tui-badge-red {
				min-width: 32rpx;
				right: 14rpx;
			}
		}
		
		.gray-style {
			.tui-btn-danger,
			.tui-btn-warning {
				background: #F5F5F5 !important;
				color: #CCCCCC;
			}
		}
		
		.tui-operation-right {
			display: flex;
			height: 100rpx;
			box-sizing: border-box;
			align-items: center;
			padding-right: 32rpx;
		}
		.iconfontAddress {
			display: flex;
			justify-content: right;
			text-align: right;
		}
		.content {
			// width: 750rpx;
			background-color: #fff;
			// padding: 20rpx;
			border-radius: 20rpx 20rpx 0 0;
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			position: relative;
		
			.iconfont {
				text-align: right;
			}
		}
		.icon-guanbi {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			padding: 20rpx;
			font-size: 32rpx;
			color: #999;
		}
		.pro-info {
			padding: 10rpx 32rpx 16rpx;
			position: relative;
			.pic {
				flex-shrink: 0;
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				background-color: #f7f7f7;
				border-radius: 10rpx;
			}
			.price {
				padding-top: 10rpx;
				margin-bottom: 26rpx;
				font-size: 34rpx;
				color: #EA655E;
				text {
					font-size: 22rpx;
					margin-left: 8rpx;
				}
			}
			.stock {
				margin-bottom: 20rpx;
				font-size: 24rpx;
				color: #999;
			}
			.attr-wrap {
				flex-wrap: wrap;
		
				text {
					line-height: 1.4;
					font-size: 24rpx;
					color: #333;
				}
				.attr {
					flex-shrink: 0;
					margin-right: 10rpx;
					color: #999;
		
					&.checked {
						color: #333;
					}
				}
			}
			
			.limit-buy{
				text-align: right;
				font-size: 28rpx;
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
			}
		}
		
		.s-tit {
			margin-left: 42rpx;
			font-size: 30rpx;
			color: #333;
			font-weight: 700;
			line-height: 90rpx;
		}
		.c-wrap {
			border-top: 2rpx solid #f7f7f7;
			min-height: 20vh;
			max-height: 60vh;
		}
		.sku-list {
			.attrs {
				display: flex;
				flex-wrap: wrap;
				padding-left: 32rpx;
				padding-right: 20rpx;
			}
			.attr {
				min-width: 58rpx;
				height: 58rpx;
				padding: 0 24rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				font-size: 26rpx;
				color: #333;
		
				&:after {
					border-color: #e0e0e0;
				}
				&.active {
					color: #e04b28;
					background-color: rgba(255, 82, 111, 0.03);
		
					&:after {
						border-color: rgba(255, 82, 111, 0.5);
					}
				}
				&.disabled {
					background-color: #f7f7f7;
					border-color: #f7f7f7;
					color: #c2c2c2;
					text-decoration: line-through;
				}
			}
		}
		
		.number-wrap {
			padding-right: 40rpx;
		}
		.btn-wrap {
			align-items: flex-end;
			justify-content: center;
			padding: 36rpx 0 30rpx;
		}
		.confirm-btn {
			width: 670rpx;
			height: 84rpx;
			background: linear-gradient(151deg, #F69E97 0%, #EA655E 100%);
			font-size: 32rpx;
			color: #fff;
			border-radius: 100rpx;
		}
		.disabled-btn{
			width: 670rpx;
			height: 84rpx;
			font-size: 32rpx;
			color: #fff;
			border-radius: 100rpx;
			background-color:#F69E97;
			opacity: 0.8;
		}
		.sm {
			width: 670rpx;
			margin: 0 auto;
		
			.btn {
				flex: 1;
				height: 75rpx;
				font-size: 32rpx;
				color: #fff;
				background-color: orange;
				border-radius: 100rpx;
		
				&:last-child {
					background-color: #e04b28;
					border-radius: 100rpx;
					margin-left: 20rpx;
				}
			}
		}
	}

	.container {
		padding-bottom: 100rpx;
	}
</style>
